﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Log in</title>
    <script type="text/javascript" src="../scripts/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="../scripts/mKook.js"></script>
    <script type='text/javascript' src='../scripts/knockout-2.1.0.js'></script>
    <script type='text/javascript' src='../scripts/jquery.mobile-1.2.0-pre.js'></script>
    <link href="../Content/jquery.mobile-1.2.0-pre.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <table class="headerTable">
                <tr>
                    <td width="30%">
                    </td>
                    <td>
                        <h1 data-bind="text: model.user"></h1>
                    </td>
                    <td width="30%">
                    </td>
                </tr>
            </table>
        </div>
        <div data-role="content">
            <form id="loginForm" name="loginForm" action="">
            <ul data-role="listview" data-inset="true">
                <li data-role="fieldcontain">
                    <label for="inpUserName">Username</label><input id="inpUserName" name="inpUserName" type="text" data-bind="value: model.user" /></li><li data-role="fieldcontain">
                        <label for="inpPassword">Password</label><input id="inpPassword" name="inpPassword" type="password" data-bind="value: model.pass" /></li><li data-role="fieldcontain">
                            <label for="inpRememberMe">Remember me?</label><input id="inpRememberMe" type="checkbox" data-bind="checked: model.auto" /></li><li data-role="fieldcontain">
                                <button id="btnLogin" name="btnLogin" data-bind="click: getActionList">Log in</button></li></ul>
            <div data-bind="visible: model.error.length > 0">
                <p><strong data-bind="text: model.error" style="color: Red"></strong></p>
            </div>
            </form>
        </div>
        <div data-role="footer">
            <p style="font-size: 10px; margin: 10px">© 2012 Danfoss and other contributors</p>
        </div>
    </div>
    <script type="text/javascript">
        //Авторизация
        function vmAuth(data) {
            var $this = this;
            //Имя модели
            $this.tmpl = 'Auth';
            //Ключи для запроса
            $this.key = ['user', 'pass'];
            //Данные
            $this.data = { user: 'Shakh Denis', auto: true, pass: '', error: '' };
            //Автозаполнения пароля
            $this.getPass = function () { if ($this.data.auto == true) return $this.data.pass; else return ''; };
            //Функция запроса на представления доступных действий в ЦРМ
            $this.getActionList = function () {
                if (!$this.checkLoginInfo()) {
                    return;
                }
            };
            //Данные формирующие представление
            $this.model = {
                user: ko.observable($this.data.user),
                auto: ko.observable($this.data.auto),
                pass: ko.observable($this.getPass()),
                error: $this.data.error
            };

            $this.checkLoginInfo = function () {
                if ($("#loginForm")) {
                    $("#loginForm").validate(
                        {
                            rules: {
                                inpUserName: { required: true },
                                inpPassword: { required: true }
                            },
                            messages: {
                                inpUserName: "Username is required",
                                inpPassword: "Password is required"
                            }
                        });
                    return $("#loginForm").valid();
                }
            }
        };

        ko.applyBindings(new vmAuth());
    </script>
</body>
</html>
